<template>
  <el-dialog
    v-model="dialogFormVisible"
    append-to-body
    draggable
    :title="$t('formgen.importItem.wordImport')"
    width="600px"
  >
    <el-upload
      drag
      accept=".doc, .docx"
      :headers="getUploadHeader()"
      :on-success="handleSuccess"
      :action="uploadUrl"
      :data="getUploadData()"
      class="mt10"
    >
      <el-icon class="el-icon--upload"><ele-UploadFilled /></el-icon>
      <div class="el-upload__text">{{ $t("formgen.wordImport.uploadDesc") }}</div>
      <template #tip>
        <div class="el-upload__tip">
          <div>{{ $t("formgen.wordImport.uploadTip1") }}</div>
          <div>{{ $t("formgen.wordImport.uploadTip2") }}</div>
          <div>{{ $t("formgen.wordImport.uploadTip3") }}</div>
        </div>
      </template>
    </el-upload>
  </el-dialog>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { getUploadHeader } from "@/utils/uploadFile";
import { baseUrl } from "@/utils/auth";
import { ElMessage } from "element-plus";

const dialogFormVisible = ref(false);

const uploadUrl = ref(baseUrl + "/form/item/importWord");

const handleShow = () => {
  dialogFormVisible.value = true;
};

const emit = defineEmits(["success"]);

const handleSuccess = (res: any) => {
  if (res.code === 200) {
    dialogFormVisible.value = false;
    emit("success", res.data);
  } else {
    ElMessage.error(res.msg);
  }
};

const getUploadData = () => {
  return {};
};

defineExpose({
  handleShow
});
</script>
<style scoped lang="scss">
.one-step {
  display: flex;
  align-items: center;
}
.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

:deep(.excel-uploader .el-upload) {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}
</style>
